<template>
	<div id="img-list-left">
		<div class="title">
			<span>大屏分组</span>
			<img v-on:click="showNewGroup" :src="addurl">
		</div>
		<ul class="group-list" >
			<li v-on:click="groupChange(item.id)" :class="[{'checked':(item.choose=='true')}]" v-for="item in menus" :key="item.id">
        <div class="gl-title">{{item.title}}</div>
        <div class="group-list-more">
          <img v-on:click.stop="showGroupMenu($event,item.id,item.title)" :src="moreurl">
        </div>
      </li>
		</ul>
	</div>
</template>
<script>
  import './list-left.less'
  import { mapActions } from 'vuex'
  export default {
    name: 'ListLeft',
    components: {
      
    },
    data () {
      return {
        moreurl:require('@/assets/imgs/12.png'),
      	menus:[
      	],
        itemid:"",
      	addurl:require('@/assets/imgs/9.png'),
        msg: 'Welcome to Your Here'
      }
    },
    mounted:function(){
      this.getGroupLists();
    },
    methods:{
      ...mapActions([
          'getGroupList'
      ]),
      showNewGroup(){
        this.$parent.showNewGroup();
      },
      showGroupMenu(Ce,id,title){
        this.$parent.showGroupMenu(Ce,id,title);
      },
      getGroupLists(){
        this.getGroupList().then(function(res){
          if (res.code=="1") {
            let data = res.data;
            for (var i = 0; i < data.length; i++) {
              if (i==0) {
                data[i].choose = 'true';
                this.$parent.setCurrentMenuId(data[i].id);
                this.$parent.moduleList(data[i].id);
              }else{
                data[i].choose = 'false';
              }
            }
            this.menus = data;
          }
        }.bind(this))
      },
    	groupChange(id){
        this.$parent.groupidChange(id);
    		for (let i = 0; i < this.menus.length; i++) {
    			if (id==this.menus[i].id) {
    				this.menus[i].choose="true";
    			}else{
    				this.menus[i].choose="false";
    			}
    		}
    	}
    }
  }
</script>
